<template>
    <div>
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
      </el-breadcrumb>
      <div class="search-box divider">
        <el-form v-bind="getFormProps()">
          <el-form-item label="时间：">
            <el-date-picker id="date"
              size="small"
              class="input-small"
              v-model="date"
              type="daterange"
              align="right"
              placeholder="选择日期范围"
              :picker-options="pickerOptions">
            </el-date-picker>
            <span class="space"></span>
            <el-date-picker
              size="small"
              v-model="monthChoosed"
              class="input-small"
              type="month"
              placeholder="选择月">
            </el-date-picker>
            <span class="space"></span>
            <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
          </el-form-item>
          <el-form-item label="状态：">
            <el-radio-group v-model="query.statusList" class="checker-radio" @change="submit()">
              <el-radio v-for="item in statesList" :label="item.value" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="order-container">
        <div class="income">
            <p style="margin-bottom: 80px;" v-if="query.statusList=='2,4'||query.statusList==2||query.statusList==4||query.statusList==6"><span class="main-color">收入</span>
            <span class="income-money">{{order_amount/100}}</span>元</p>
        </div>
        <e-cellbox>
          <e-cell-item class="tc">
            <span class="goods-title">商品名称</span> <span class="seperate">|</span> <span>买家名称</span>
          </e-cell-item>
          <e-cell-item class="tc">
            <span>金额</span> <span class="seperate">|</span> <span>数量</span>
            <span style="margin: 0 70px;">状态</span> <span>操作</span>
          </e-cell-item>
        </e-cellbox>
        <div class="order-list">
          <ul>
            <li v-for="item in order_list.list" :key="item.id">
              <div class="order-title">
                <e-cellbox>
                  <e-cell-item style="width: 420px;">
                    <span class="order-date">{{item.createDateStr}}</span>
                    <span class="order-user">{{item.buyerName}}</span>
                  </e-cell-item>
                  <e-cell-item class="tl">
                    <span class="total-money">¥ {{item.total/100}}</span>
                    <span class="order-state">
                      <span v-if="item.status===1">待付款</span>
                      <span v-if="item.status===2">已付款</span>
                      <span v-if="item.status===4">交易完成</span>
                      <span v-if="item.status===5">交易关闭</span>
                    </span>
                    <span @click="handleRouter(item.details[0].orderId)" class="link">详情</span>
                  </e-cell-item>
                </e-cellbox>
              </div>  
              <div class="order-body" v-for="detail in item.details" :key="detail.id">   
                <e-cellbox>
                  <e-cell-item class="goods-detail">
                    <img class="avatar" :src="detail.imgUrl">
                    <div class="goods">
                      <div :title="detail.goodsFullName">{{detail.goodsFullName}}</div>
                      <div class="goodsRang">
                        <span v-for="(item, index) in detail.goodsRange" :key="index">{{item}}</span>
                      </div>
                    </div>                    
                  </e-cell-item>
                  <e-cell-item class="tl">
                    <span class="order-money">+{{detail.unitPrice/100}}</span>
                    <span class="item-count">x{{detail.quantity}}</span>
                  </e-cell-item>
                </e-cellbox>
              </div>    
            </li>
          </ul>
        </div>
        <!--分页-->
        <el-pagination
          v-bind="getPaginationProps(order_list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {pagingList} from 'utils/mixins'
  export default {
    mixins: [pagingList],
    computed: {
      month () {
        return this.monthChoosed
      },
      date: {
        get () {
          return [new Date(Number(this.query.beginCreateDate)), new Date(Number(this.query.endCreateDate))]
        },
        set (value) {
          if (value && value[0]) {
            this.query.beginCreateDate = value[0].getTime()
            this.query.endCreateDate = value[1].getTime()
          }
        }
      },
      ...mapGetters({
        order_list: 'order_list', // 获取订单列表
        order_amount: 'order_amount' // 获取订单总金额
      })
    },
    data () {
      return {
        query: this.getQuery(),
        monthChoosed: '',
        statesList: [
          {
            label: '全部',
            value: '2,4'
          },
          {
            label: '待付款',
            value: '1'
          },
          {
            label: '已付款',
            value: '2'
          },
          {
            label: '已完成',
            value: '4'
          },
          {
            label: '已关闭',
            // value: '3, 5'
            value: '5'
          },
          {
            label: '退货/售后',
            // value: '6, 7'
            value: '6'
          }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    watch: {
      month (newVal, oldVal) {
        let addDay = null
        let date = new Date(newVal)
        let m = date.getMonth() + 1
        let year = date.getFullYear()
        if (m === 2) {
          if (year % 4 === 0 && ((year % 100) !== 0)) { // 闰年
            addDay = 28
          } else {
            addDay = 27
          }
        } else if (parseInt(m) === 4 || parseInt(m) === 6 || parseInt(m) === 9 || parseInt(m) === 11) {
          addDay = 29
        } else {
          addDay = 30
        }
        this.query.beginCreateDate = new Date(newVal).getTime()
        this.query.endCreateDate = new Date(date.setDate(date.getDate() + addDay)).getTime()
        let start = new Date(this.query.beginCreateDate).format()
        let end = new Date(this.query.endCreateDate).format()
        let dateInput = document.querySelector('#date').children[1]
        dateInput.value = start + ' - ' + end
      }
    },
    methods: {
      fetch () {
        this.$store.dispatch('order_list', this.query)
        this.$store.dispatch('order_amount', this.query)
      },
      handleRouter (id) {
        window.open('/order/detail/' + id)
      }
    }
  }
</script>

<style scoped lang="scss">
.search-box{
  padding: 50px 60px 30px 60px;
  .input-small{
    width:220px;
  }
}
.order-container {
  padding: 55px 57px;
}

.seperate {
  margin: 0 20px;
  color: #bfbfbf;
}

.income {
  text-align: center;
  p {
    span {
      font-size: 18px;
      margin-right: 10px;
    }
  }
}

.income-money {
  font-size: 24px !important;
  color: #333;
  font-weight: 700;
}

.order-title {
  background: #f5f5f5;
  line-height: 30px;
}

.order-title, .order-body {
  padding: 0 30px 0 40px;
}

.goods-title {
  width: 145px;
  text-align: left;
  display: inline-block;
}

.order-date {
  display: inline-block;
  padding-right: 75px;
}

.order-body {
  border-bottom: 1px solid #f0f0f0;
  .avatar {
    width: 30px;
    height: 30px;
    margin: 20px 10px 20px 0
  }
}

.goods-detail {
  width: 420px;
  .goods {
    width: 200px; 
    vertical-align: middle;
    display: inline-block;
    div { 
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.goodsRang {
        font-size: 12px;
        &>span {
          padding-right:3px;
        }
      }
    }
  }
}

.order-money {
  width: 80px;
  display: inline-block;
  font-size: 12px;
}

.total-money {
  font-weight: 700;
  width: 160px;
  display: inline-block;
}

.order-state {
  width: 110px;
  display: inline-block;
}

.link {
  cursor: point;
}

.item-count {
  color: #999;
}

.order-body .order-money, .item-count {
  line-height: 70px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block
}

.order-user {
  color: #999;
  font-size: 12px;
  vertical-align: middle;
  width: 150px;  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.order-list {
  margin-top: 20px;
  li {
    margin-bottom: 20px;
  }
}

</style>
